<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Idea3D</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="./index.css">
        <script src="./js/index.js"></script>
        <script src="./js/element.js"></script>
        <script src="./js/page.js"></script>
        <script src="./js/animation.js"></script>
        <script src="./js/file.js"></script>
        <script src="./js/theme.js"></script>
    </head>

    <body>
        <div class="toolbar">
            <div class="toolbox-btns">
                <div class="tab-btn" onclick="switch_tab(0)">文件</div>
                <div class="tab-btn" onclick="switch_tab(1)">元素</div>
                <div class="tab-btn" onclick="switch_tab(2)">页面</div>
                <div class="tab-btn" onclick="switch_tab(3)">动画</div>
                <div class="tab-btn" onclick="switch_tab(4)">主题</div>
            </div>
            <div class="toolbox">
                <div class="tab">
					<btn onclick="new_file()">新建</btn>
                    <btn onclick="save()">保存</btn>
                    <btn onclick="exportf()">导出</btn>
                    <btn onclick="openf()">打开</btn>
                    <btn onclick="preview()">预览</btn>
                </div>
                <div class="tab">
                    <btn onclick="create_h(1)">h1</btn>
                    <btn onclick="create_h(2)">h2</btn>
                    <btn onclick="create_h(3)">h3</btn>
                    <btn onclick="create_h(4)">h4</btn>
                    <btn onclick="create_h(5)">h5</btn>
                    <btn onclick="create_h(6)">h6</btn>
                    <btn onclick="create_p()">段落</btn>
                    <btn onclick="create_img()">图片</btn>
                    <btn onclick="create_link()">链接</btn>
                    <btn onclick="delete_element()">删除元素</btn>
                    <btn onclick="up_element()">上移一层</btn>
                    <btn onclick="down_element()">下移一层</btn>
                </div>
                <div class="tab">
                    <btn onclick="create_page()">新建页面</btn>
                    <btn onclick="delete_page()">删除页面</btn>
                    <btn onclick="up_page()">上移页面</btn>
                    <btn onclick="down_page()">下移页面</btn>
                </div>
                <div class="tab">
                    <btn onclick="add_animation('fly-t')">飞入-上</btn>
                    <btn onclick="add_animation('fly-tl')">飞入-左上</btn>
                    <btn onclick="add_animation('fly-l')">飞入-左</btn>
                    <btn onclick="add_animation('fly-tb')">飞入-左下</btn>
                    <btn onclick="add_animation('fly-b')">飞入-下</btn>
                    <btn onclick="add_animation('fly-rb')">飞入-右下</btn>
                    <btn onclick="add_animation('fly-r')">飞入-右</btn>
                    <btn onclick="add_animation('fly-rt')">飞入-右上</btn>
                    <btn onclick="add_animation('rock')">摇晃</btn>
                    <btn onclick="add_animation('scale-in')">缩放-进入</btn>
                    <btn onclick="add_animation('scale-out')">缩放-退出</btn>
                    <btn onclick="add_animation('rotate')">旋转</btn>
                    <btn onclick="add_animation('bomb')">爆炸</btn>
                    <btn onclick="edit_animation()">自定义动画</btn>
                </div>
                <div class="tab">
                    <btn onclick="window.open('../edit_theme/edittheme.html')">编辑主题</btn>
                    <btn onclick="load_theme()">加载主题</btn>
                </div>
            </div>
        </div>
        <div class="main row">
            <div class="box">

            </div>
            <div class="page-box" align="center">
                <div class="page"></div>
            </div>
            <div class="box attr-box">
                <h1>元素属性</h1>
                <div class="attr-tab pageattr">
                    <hr>
                    <h3>X:</h3>
                    <input type="number" class="page-x">
                    <br>
                    <h3>Y:</h3>
                    <input type="number" class="page-y">
                    <br>
                    <h3>Z:</h3>
                    <input type="number" class="page-z">
                    <br>
                    <h3>Rotate-X:</h3>
                    <input type="number" class="page-rotate-x">
                    <br>
                    <h3>Rotate-Y:</h3>
                    <input type="number" class="page-rotate-y">
                    <br>
                    <h3>Rotate-Z:</h3>
                    <input type="number" class="page-rotate-z">
                    <br>
                    <h3>Scale:</h3>
                    <input type="number" class="page-scale">
                    <br>
                    <h3>Has Background:</h3>
                    <input type="checkbox" class="page-hasback">
                    <br>
                </div>
                <div class="attr-tab obj">
                    <hr>
                    <h3>X:</h3>
                    <input type="number" class="obj-x">
                    <br>
                    <h3>Y:</h3>
                    <input type="number" class="obj-y">
                </div>
                <div class="attr-tab text">
                    <hr>
                    <h3>文字颜色:</h3>
                    <input type="color" class="text-color">
                    <br>
                    <h3>文字宽度:</h3>
                    <input type="number" class="text-width">px
                    <br>
                    <h3>文字内容:</h3>
                    <textarea class="text-text" cols="25" rows="10"></textarea>
                </div>
                <div class="attr-tab img">
                    <hr>
                    <h3>图片地址:</h3>
                    <input type="text" class="img-src"><br>
                    <h3>图片宽度:</h3>
                    <input type="number" class="img-width">px<br>
                    <h3>图片高度:</h3>
                    <input type="number" class="img-height">px<br>
                </div>
                <div class="attr-tab link">
                    <hr>
                    <h3>链接地址:</h3>
                    <input type="text" class="link-href">
                </div>
                <div class="animation-tab">
                    
                </div>
            </div>
        </div>
        <div class="tip-box">
        </div>
    </body>

</html>